<template>
  <div class="merchant-detail-container">
    <!-- 头部区域 -->
    <div class="page-header">
      <div class="title-section">
        <h1 class="page-title">
          <span class="merchant-name">{{ merchant.name || '商户详情' }}</span>
        </h1>
        <router-link :to="'/admin/merchants'" class="back-link">
          <i class="fas fa-arrow-left"></i> 返回商户列表
        </router-link>
      </div>

      <!-- <div class="header-actions">
        <button class="btn-primary" @click="handleEdit">
          <i class="fas fa-edit"></i> 编辑
        </button>
      </div> -->
    </div>

    <!-- 商户信息卡片 -->
    <div class="merchant-info-card">
      <!-- <div class="merchant-logo">
        <img :src="merchant.logo" :alt="merchant.name" />
      </div> -->
      <div class="merchant-details">
        <div class="info-group">
          <h3 class="merchant-name">{{ merchant.userConfigWithOne.shop_title }}</h3>
          <div class="merchant-status" :class="merchant.userConfigWithOne.status === 1 ? 'pending' : 'disabled'">
            {{ merchant.status == 1 ? '正常' : '冻结' }}
          </div>
        </div>

        <div class="info-row">
          <div class="info-item flex">
            <span class="label">类别</span>

            <div>
              <el-tag class="value margin-right" v-for="(tag, index) in merchant.userConfigWithOne.shop_class_list"
                :key="index">{{
                  tag.type_name
                }}</el-tag>
            </div>
          </div>

          <div class="info-item">
            <span class="label">地址</span>
            <span class="value">{{ merchant.address || '暂无地址' }}</span>
          </div>
        </div>

        <div class="info-row">
          <!-- <div class="info-item">
            <span class="label">联系人</span>
            <span class="value">{{ merchant.contact }}</span>
          </div> -->

          <div class="info-item">
            <span class="label">账号(纯数字6-11位)</span>
            <span class="value">{{ merchant.phone || '暂无' }}</span>
          </div>
        </div>

        <div class="info-row">
          <div class="info-item">
            <span class="label">邮箱</span>
            <span class="value">{{ merchant.email || '暂无邮箱' }}</span>
          </div>
          <div class="info-item">
            <span class="label">创建时间</span>
            <span class="value">{{ merchant.create_time }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据概览区域 -->
    <div class="data-overview">
      <h2 class="section-title">数据概览</h2>
      <div class="stats-cards">
        <div class="stat-card">
          <div class="stat-icon">
            <i class="fas fa-shopping-cart"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">¥{{ merchantAllData.orderMoneyNum }}</div>
            <div class="stat-label">总交易额</div>
          </div>
        </div>

        <div class="stat-card">
          <div class="stat-icon">
            <i class="fas fa-file-invoice"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ merchantAllData.orderMoneyCount }}</div>
            <div class="stat-label">总订单数</div>
          </div>
        </div>

        <!-- <div class="stat-card">
          <div class="stat-icon">
            <i class="fas fa-star"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ merchant.rating ? merchant.rating.toFixed(1) : '暂无' }}</div>
            <div class="stat-label">平均评分</div>
          </div>
        </div> -->

        <div class="stat-card">
          <div class="stat-icon">
            <i class="fas fa-box"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ merchantAllData.goodsCount }}</div>
            <div class="stat-label">产品数量</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速操作区域 -->
    <div class="quick-actions">
      <h2 class="section-title">快速操作</h2>
      <div class="action-cards">
        <router-link :to="`/admin/merchants/${merchantId}/products`" class="action-card">
          <div class="action-icon">
            <i class="fas fa-boxes"></i>
          </div>
          <div class="action-text">查看产品</div>
        </router-link>

        <a href="#" class="action-card" @click.prevent="navigateToOrders">
          <div class="action-icon">
            <i class="fas fa-list-alt"></i>
          </div>
          <div class="action-text">查看订单</div>
        </a>

        <a href="#" class="action-card" @click.prevent="toggleStatus">
          <div class="action-icon">
            <i :class="merchant.status === '正常' ? 'fas fa-ban' : 'fas fa-check-circle'"></i>
          </div>
          <div class="action-text">{{ merchant.status === '正常' ? '禁用商户' : '启用商户' }}</div>
        </a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { mockMerchants, generateMerchantProductsData } from '@/utils/adminMock';
import { GetShopDetailsApi } from '@/api/index'

const route = useRoute();
const router = useRouter();
const merchantId = computed(() => route.params.merchantId as string);

// 商户数据
const merchant = reactive<any>({
  id: '',
  userConfigWithOne: {}
});

// 统计数据
const merchantAllData = reactive({})

// 初始化数据
onMounted(() => {
  merchant.id = route.params.merchantId

  loadMerchantData();
});



// 加载商户数据
async function loadMerchantData() {
  try {
    const res = await GetShopDetailsApi(merchant)

    Object.assign(merchantAllData, res.data)

    Object.assign(merchant, res.data.data)
  } catch (error) {
    console.log(error);
  }
}

// 工具函数
function formatNumber(num: number): string {
  return num.toLocaleString('zh-CN');
}

function randomInteger(min: number, max: number): number {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// 操作函数
function handleEdit() {
  console.log('编辑商户', merchantId.value);
  // 在实际应用中应该跳转到编辑页面或打开编辑模态框
}

function navigateToOrders() {
  console.log('查看商户订单', merchantId.value);
  // 模拟导航到订单页面
  router.push(`/admin/orders?merchantId=${merchantId.value}`);
}

function toggleStatus() {
  console.log('切换商户状态', merchantId.value);
  const newStatus = merchant.value.status === '正常' ? '已禁用' : '正常';
  merchant.value.status = newStatus;
  // 实际应用中应该调用API更新状态
}
</script>

<style scoped>
.merchant-detail-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 头部区域样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.title-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #2c3e50;
}

.merchant-name {
  color: #e74c3c;
}

.back-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #7f8c8d;
  text-decoration: none;
  transition: color 0.3s;
  margin-top: 5px;
}

.back-link:hover {
  color: #e74c3c;
}

.back-link i {
  margin-right: 5px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.btn-primary {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: 600;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #c0392b;
}

.btn-primary i {
  margin-right: 5px;
}

/* 商户信息卡片样式 */
.merchant-info-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
}

.merchant-logo {
  flex-shrink: 0;
}

.merchant-logo img {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.merchant-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.info-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.info-group .merchant-name {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #2c3e50;
}

.merchant-status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.merchant-status.active {
  background-color: #2ecc71;
}

.merchant-status.pending {
  background-color: #f39c12;
}

.merchant-status.disabled {
  background-color: #e74c3c;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
}

.info-item .label {
  font-size: 12px;
  color: #7f8c8d;
  margin-bottom: 5px;
}

.info-item .value {
  font-size: 14px;
  color: #2c3e50;
}

/* 数据概览区域样式 */
.data-overview {
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #2c3e50;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 15px;
}

.stat-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: rgba(231, 76, 60, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e74c3c;
  font-size: 18px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #7f8c8d;
}

/* 快速操作区域样式 */
.quick-actions {
  margin-bottom: 20px;
}

.action-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
}

.action-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
  text-align: center;
  text-decoration: none;
  color: #2c3e50;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  color: #e74c3c;
}

.action-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(231, 76, 60, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e74c3c;
  font-size: 20px;
  margin-bottom: 10px;
}

.action-text {
  font-size: 14px;
  font-weight: 600;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
  }

  .merchant-info-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .info-row {
    flex-direction: column;
    gap: 10px;
  }

  .info-item {
    min-width: unset;
  }
}
</style>
